<div class="todo-wrapper">
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        (keyup.enter)="addItem($event)"
      />
    </header>
    <div *ngIf="todoList.length">
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" [(ngModel)]="selectedAll" />
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <li
            *ngFor="let item of list; let i = index"
            [class.completed]="item.selected"
            [class.editing]="currentItem === item"
            (dblclick)="dblClick(item)"
          >
            <div class="view">
              <input class="toggle" type="checkbox" [(ngModel)]="item.selected" />
              <label>{{item.content}}</label>
              <button class="destroy" (click)="delList(item)"></button>
            </div>
            <input
              class="edit"
              [appFocus]="currentItem === item"
              [(ngModel)]="item.content"
              (keyup.enter)="editEnter(item)"
              (keyup.esc)="editEsc(item)"
              (blur)="editEsc(item)"
            />
          </li>
        </ul>
      </section>
      <footer class="footer">
        <span class="todo-count"><strong>{{completedCount}}</strong> item left</span>
        <ul class="filters">
          <li *ngFor="let item of stateList">
            <a
              [ngClass]="{'selected': item === currentState}"
              (click)="stateChange(item)"
            >{{item}}</a>
          </li>
        </ul>
        <button
          class="clear-completed"
          *ngIf="selectedSome"
          (click)="clearCompleted()"
        >Clear completed</button>
      </footer>
    </div>
  </section>
</div>

